<template>
  <div class="profile">
    <common-header></common-header>
    <div class="content">
      <h1 style="margin-bottom:20px;">我的订单</h1>
      <div class="order-item" v-for="item in order" :key="item.id">
        <div>
          <span>订单编号：{{randomNumber}}{{ item.id }}</span>
          <span style="margin: 0 60px;">总价：￥{{ item.total }}</span>
          <span
            >状态：{{ item.status | orderStatus }}
            <a v-if="item.status === 1" href="#" @click="goPay(item.id)" style="margin-left:100px;"
              >去付款</a
            >
            <a
              v-else-if="item.status === 3"
              href="#"
              @click="finish(item.id)"
              style="margin-left:100px;"
              >确认收货</a
            >
            <a
              v-else-if="item.status === 4"
              href="#"
              @click="drop(item.id)"
              style="margin-left:100px;"
              >删除订单</a
            >

          </span>
        </div>
        <br />
        <div>
          <span>收货人：{{ item.name }}</span>
          <span style="margin: 0 60px;">联系方式：{{ item.phone }}</span>
          <span>收货地址：{{ item.place }}</span>
        </div>
        <Divider />
        <h3>详情</h3>
        <div v-if="item.goods">
          <div v-for="item in item.goods" :key="item.id">
            <span>零食名称：{{ item.title }}</span>
            <span style="margin:0 50px;">价格：￥{{ item.price }} </span>
            <span>数量：x{{ item.ordergoods.count || 1 }} </span>
            <button @click="pinlun" class="res">评论</button>
          </div>
        </div>
      </div>

      <!--<Row style="margin-top:40px;margin-bottom:20px;">-->
      <!--<goods-title title="评论"></goods-title>-->
      <!--<goods-comment-->
      <!--v-for="comment in comments"-->
      <!--:key="comment.id"-->
      <!--:comment="comment"-->
      <!--&gt;</goods-comment>-->
      <!--</Row>-->
      <!--<Row>-->
      <!--<common-comment :id="+id" @on-add="onAdd"></common-comment>-->
      <!--</Row>-->

      <div v-if="order.length === 0">
        暂时没有订单，赶快去 <router-link to="/">购物吧</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";

export default {
  data() {
    return {
      address: [],
      order: [],
      userInfo: {},
      up_id: 0,
      updateModal: false,
      updatePlace: "",
      showColl: "",
      showAddAddress: false,
      add_address: "",
      goods: {},
      id: 0,
      comments: []
    };
  },
  computed: {
    randomNumber() {
    const now = new Date()
    let month = now.getMonth() + 1
    let day = now.getDate()
    let hour = now.getHours()
    let minutes = now.getMinutes()
    let seconds = now.getSeconds()
    return now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 89 + 100)).toString()
      }
  },
  mounted() {
    this.getProfile();
    this.id = this.$route.query.id;
    if (this.id) {
      this.$api.goods.getDetail(this.id).then(data => {
        this.goods = data;
      });
      this.$api.comment.get(this.id).then(data => {
        this.comments = data;
      });
    }
  },
  methods: {
    getProfile() {
      this.$api.auth.getProfile().then(data => {
        this.address = data.address;
        this.order = data.order;
        this.userInfo = data.userInfo;
      });
    },
    onAdd(c) {
      this.comments.push(c);
    },
    del(id) {
      this.$api.address.del(id).then(data => {
        this.address = this.address.filter(ad => ad.id !== id);
        this.$toast.success("删除成功");
      });
    },
    pinlun(){
      this.$router.push("/pinlun");
      //this.$router.push('/detail?id=' + 10);
    },
    update(item) {
      this.up_id = item.id;
      this.updatePlace = item.place;
      this.updateModal = true;
    },
    updateAddress() {
      this.$api.address.update(this.up_id, this.updatePlace).then(data => {
        this.updateModal = false;
        this.address = this.address.map(ad => {
          if (ad.id === this.up_id) {
            ad.place = this.updatePlace;
          }
          return ad;
        });
        this.up_id = 0;
        this.updateAddress = "";
      });
    },
    cancel() {
      this.updateModal = false;
      this.updatePlace = "";
      this.up_id = 0;
    },
    goPay(id) {
      this.$router.push("/order?id=" + id);
    },
    addAddress() {
      this.$api.address.add(this.add_address).then(data => {
        this.address.push(data);
        this.add_address = "";
        this.$toast.success("添加成功");
      });
      this.showAddAddress = false;
    },
    adcancel() {
      this.showAddAddress = false;
    },
    finish(id) {
      this.$api.order.finish(id).then(() => {
        this.order = this.order.filter(o => {
          if (o.id === id) {
            o.status = 4;
          }
          return o;
        });
        this.$toast.success("确认收货");
      });
    },
    drop(id) {
      if(confirm('确认删除吗')) {
        this.$api.order.drop(id).then(() => {
        this.order = this.order.filter(o => o.id !== id);
        this.$toast.success("删除成功");
      });
      }else {
        return false
      }
    },
    // comment() {
    //   this.$router.replace('/detail')
    // }
  },
  filters: {
    orderStatus(val) {
      if (val === 2) {
        return "待发货";
      } else if (val === 3) {
        return "已发货";
      } else if (val === 4) {
        return "已收货";
      } else if (val === 1) {
        return "待付款";
      }
    },
    fmttime(val) {
      return moment(val).format("YYYY/M/DD HH:mm:ss");
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30px 15%;
  padding: 20px 30px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  .order-item {
    padding: 20px 30px;
    border: 1px dashed #933;
    margin-bottom: 40px;
  }
}
.order-item{
  position: relative;
}
.res{
  width: 80px;
  height: 30px;
  background-color: palevioletred;
  border-radius: 3px;
  outline: 0;
  border:0;
  cursor: pointer;
  position: absolute;
  bottom: 14px;
  right: 34px;
}
</style>
